<template>
	<div>
		<el-dialog :title="rewuDetail.year+'年度'+rewuDetail.scheduleTypeStr+'自行监测计划'" :visible.sync="dialogVisible" width="40%" append-to-body>
			<div>
				<el-form ref="form" :model="form" :rules="rules" label-width="80px">
					<el-form-item label="排口" prop="outletId">
						<div class="date-item displayFlex">
							<el-select v-model="form.outletId" filterable remote placeholder="选择排口"
								@change="form.pollutionIdList = [],getPollutionList()" style="width:100%">
								<el-option v-for="item in outletList" :key="item.id" :label="item.outletName"
									:value="item.id" />
							</el-select>
						</div>
					</el-form-item>
					<el-form-item label="污染物" prop="pollutionIdList">
						<div class="date-item displayFlex">
							<el-select v-model="form.pollutionIdList" filterable remote placeholder="选择污染物" multiple
								style="width:100%">
								<el-option v-for="item in dataList1" :key="item.pollutionId" :label="item.pollutionName"
									:value="item.pollutionId" />
							</el-select>
						</div>
					</el-form-item>
					<el-form-item label="执行人" prop="planSubmitBy">
						<div class="date-item displayFlex">
							<el-select v-model="form.planSubmitBy" filterable remote placeholder="选择执行人"
								style="width:100%">
								<el-option v-for="item in dataList2" :key="item.userId" :label="item.userName"
									:value="item.userId" />
							</el-select>
						</div>
					</el-form-item>
					<div class="mb20">自行监测频率维护</div>
					<div>
						<div v-for="(item,index) in form.times" :key="index" class="displayFlex mb20">
							<div class="displayFlex">
								<span>{{index+1}}、</span>
								<el-date-picker v-model="form.times[index]" type="datetimerange" range-separator="至"
									style="width:450px" start-placeholder="监测开始时间" end-placeholder="监测结束日期"
									value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions">
								</el-date-picker>
							</div>

							<span class="ml20" @click="removeTimes(index)">
								<i class="el-icon-remove-outline" style="color: brown;font-size: 22px;"></i>
							</span>
						</div>

						<div class="u-type-primary point" style="color:#3a3ef4" @click="form.times.push([])">
							<span class="mr10">+</span>
							<span>添加监测次数</span>
						</div>
					</div>
				</el-form>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false,form = $options.data().form">取 消</el-button>
				<el-button type="primary" @click="confirmSave">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	let that
	export default {
		props: {
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				year: new Date().getFullYear(),
				dialogVisible: false,
				form: {
					planId: '',
					outletId: '',
					pollutionIdList: [],
					planSubmitBy: '',
					times: [
						[]
					]
				},
				outletList: [],
				dataList1: [],
				dataList2: [],
				rules: {
					outletId: [{
						required: true,
						message: '请选择排口',
						trigger: 'change'
					}],
					pollutionIdList: [{
						required: true,
						message: '请选择污染物',
						trigger: 'change'
					}],
					planSubmitBy: [{
						required: true,
						message: '请选择执行人',
						trigger: 'change'
					}]
				},
				rewuDetail:{},
				pickerOptions: {
					//限制只能选择一年时间
					disabledDate(time) {
						let _endDate = new Date(that.rewuDetail.endTime).getTime();
						let _startDate = new Date(that.rewuDetail.startTime).getTime();
						//console.log(new Date(that.year + '-12-31 59:59:59'))
						// //即大于开始时间小于结束时间
						if (time.getTime() < _endDate && time.getTime() > _startDate) {
							return false
						} else {
							return true
						}
					},
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			//console.log(that.detail)

		},

		methods: {
			open(planId,rewuDetail) {
				that.rewuDetail = rewuDetail
				//console.log(rewuDetail)
				if (that.type == 'WASTE_WATER') that.getWaterOutletBaseList()
				else that.getGasOutletBaseList()
				that.getPlanExecutorList()
				that.dialogVisible = true
				that.form = that.$options.data().form
				that.form.planId = planId
			},

			close() {
				that.dialogVisible = false
				that.form = that.$options.data().form
			},

			confirmSave() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						let api = "gasOutlet/survey/create"
						if (that.type == 'WASTE_WATER') api = 'waterOutlet/survey/create'
						let newDates = []
						for (let item of that.form.times) {
							if (item && item.length == 0) return that.$message.error('请选择监测时间')
							if (item && item[0] == item[1]) return that.$message.error('监测开始时间不能等于结束时间')
							newDates.push({
								planStartTime: item[0],
								planEndTime: item[1]
							})
						}
						that.form.itemList = newDates
						that.ajax({
							url: api,
							data: JSON.stringify(that.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.close()
									that.$emit('refresh')
									return that.$message.success("保存成功")
								}
							},
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			getPollutionList() {
				let api = 'gasOutlet/getGasOutletPollutionList'
				if (that.type == 'WASTE_WATER') api = 'waterOutlet/getWaterOutletPollutionList'
				that.ajax({
					url: api,
					contentType: 'application/x-www-form-urlencoded',
					data: {
						outletId: that.form.outletId
					},
					success: function(result) {
						that.dataList1 = result.data
					},
				})
			},

			getPlanExecutorList() {
				that.ajax({
					url: '/documentEntSchedule/getPlanExecutorList',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList2 = result.data
					},
				})
			},

			removeTimes(index) {
				if (that.form.times.length == 1) return that.$message.error('至少保留一次监测')
				that.form.times.splice(index, 1)
			},

			save() {
				that.ajax({
					url: '/gasSelfMonitor/save',
					data: JSON.stringify(that.form),
					contentType: 'application/json',
					success: function(result) {
						that.$message.success('保存成功')
						that.dialogVisible = false
					},
				})
			},

			getWaterOutletBaseList() {
				that.ajax({
					url: '/waterOutlet/getWaterOutletBaseList?ticketId=' + that.$store.state.token,
					data: JSON.stringify({
						ticketId: that.$store.state.token,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							for (let item of result.data) {
								item.outletName = item.waterOutletName
							}
							that.outletList = result.data
						}
					},
				})
			},

			getGasOutletBaseList() {
				that.ajax({
					url: '/gasOutlet/getGasOutletBaseList?ticketId=' + that.$store.state.token,
					data: JSON.stringify({
						ticketId: that.$store.state.token,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							for (let item of result.data) {
								item.outletName = item.gasOutletName
							}
							that.outletList = result.data
						}
					},
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>